<template>
  <view class="header-nav">
    <view class="nav-section">
      <scroll-view
        scroll-x="true"
        :scroll-into-view="scrollToNode"
        :scroll-with-animation="true"
      >
        <view
          class="nav-item-box"
          v-for="(item, index) in dataList"
          :key="index"
          :id="'nav' + index"
        >
          <view
            class="header-nav-item"
            :class="[activeTab == index ? 'active' : '']"
            @click="changeNav(item, index)"
          >
            <view class="item-text">{{ item.name }}</view>
            <view class="item-active-line"></view>
          </view>
        </view>
      </scroll-view>
    </view>
  </view>
</template>

<script>
import { mapGetters } from "vuex";
export default {
  name: "",
  props: {
    propsData: {
      type: Object,
      default: {}
    },
    dataList: {
      type: Array,
      default: []
    }
  },
  mixins: [],
  components: {},
  data() {
    return {
      activeTab: 0,
      scrollToNode: "",
      first: false
    };
  },
  mounted() {},
  watch: {
    dataList: {
      handler() {
        // #ifdef MP-ALIPAY
        if (!this.first) {
          this.init();
          this.first = true;
        }
        // #endif
        // #ifndef MP-ALIPAY
        this.init();
        // #endif
      },
      immediate: true,
      deep: true
    },
    getGoCatId: {
      handler() {
        this.$nextTick(() => {
          this.init();
        });
      },
      immediate: true
    }
  },
  computed: {
    ...mapGetters(["getGoCatId"])
  },
  methods: {
    init() {
      if (this.dataList.length) {
        let e = this.getGoCatId,
          { dataList } = this,
          index = 0,
          item = dataList.find((el) => el.id === e);
        if (item) {
          index = dataList.findIndex((el) => el.id === e);
        }

        item = dataList[index];
        this.$nextTick(() => {
          this.changeNav(item, index);
        });
      }
    },
    changeNav(item, index) {
      if (this.activeTab != -1 && index != this.activeTab) {
        if (index > this.activeTab) {
          if (index + 1 <= this.dataList.length)
            this.scrollToNode = "nav" + (index - 1);
        } else {
          if (index - 1 >= -1) this.scrollToNode = "nav" + (index - 1);
        }
      }
      this.activeTab = index;
      this.$emit("navChange", item);
    }
  }
};
</script>

<style lang="scss" scoped>
.header-nav {
  width: 100%;
  height: 12vw;
  background: #ffffff;
  display: flex;
  align-items: center;
  overflow-x: scroll;
  overflow-y: hidden;
  .nav-section {
    width: 95.2%;
    margin: 0 auto;
    height: 100%;
    scroll-view {
      white-space: nowrap;
      .nav-item-box {
        height: 12vw;
        display: inline-block;
        margin-right: 4.8%;
      }
    }
  }
  .header-nav-item {
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    .item-text {
      font-size: 3.73vw;
      font-family: PingFang SC;
      font-weight: 400;
      color: #262626;
    }
    .item-active-line {
      width: 6.67vw;
      height: 6rpx;
      margin-top: 4rpx;
      display: inline-block;
    }
  }
  .active {
    .item-text {
      font-weight: 600;
      color: #262626;
    }
    .item-active-line {
      background: #f0250e;
    }
  }
  .header-nav-item:last-child {
    margin-right: 0;
  }
}
.header-nav::-webkit-scrollbar {
  width: 0;
  height: 0;
}
</style>
